<template>
  <div class="top">
    <div class="top-one">
      <img @click="tiaoHandle" class="pic" src="../image/saoma_icon_fanhui.png" alt="">
      <h1>人气榜单</h1>
      
      <img class="pic-a" :options="options"  src="../image/fenxiang.png" alt="" @click="showShare = true" >
    </div>
    <ul>
      <li><img src="../image/fangshai.png" alt=""></li>
      <li><img src="../image/kerun.png" alt=""></li>
      <li><img src="../image/lankou.png" alt=""></li>
      <li><img src="../image/bolaiya.png" alt=""></li>
    </ul>
    <van-share-sheet
  v-model="showShare"
  title="分享"
  :options="options"
/>
  </div>
</template>

<script>

export default {
    data(){
        return {
          showShare: false,
      options: [
        [
          { name: '发给朋友', icon: 'wechat' },
          { name: '微博', icon: 'weibo' },
          { name: '朋友圈', icon: 'wechat-moments' },
        ],
      ]
        }
        
    },
    methods:{
      tiaoHandle(){
        this.$router.push({name:"index"})
      }
    }
}
</script>

<style lang="scss">
  .top{
    box-sizing: border-box;
    padding-top: 105px;
    // width: 100vh;
    // height: 100vw;
    // background-color: aqua;
    li{
      width: 649px;
      height: 274px;
      margin-left:50px ;
      margin-top:62px ;
      img{
        width: 649px;
        height: 274px;
      }
    }
    .van-popup{
      margin-left: 20px;
      // background: red;
      width: 710px;
      height: 268px;
      .van-share-sheet__title{
        font-size: 28px;
      }
      .van-share-sheet__cancel{
        // height: 100px;
        text-align: center;
        line-height: 65px;
        // margin-top: 10px;
      }
    .van-share-sheet__options{
        // background: blue;
        justify-content: space-around;
        height: 155px;
        .van-share-sheet__icon{
          width: 98px;
          height: 98px;

        }
        span{
          font-size: 28px;
        }
    }
    }
  }
  .top-one{
  
  display: flex;
  align-items: center;
  justify-content: space-around;
  .pic{
    width: 12px;
    height: 24px;

  }
  .pic-a{
    width: 26px;
    height: 24px;
  }
  h1{
   width: 360px;
height: 48px;
font-size: 34px;
font-family: PingFangSC-Medium-, PingFangSC-Medium;
font-weight:bold;
text-align: center;

color: #2F2F2F;
line-height: 48px;
// border: 1px solid red;
  }
  }
 
  

</style>